<template>
  <div class="home" @touchstart="handleTouchstart" @touchend="handleTouchend">
    <nav-bar
      @toMy="toMy"
      @toMessage="toMessage"
      :messageCount="messageCount"
    ></nav-bar>
    <zoning :zoningHeight="zoningHeight" :isApproval="isApproval" :zoningItemFlex="zoningItemFlex"></zoning>
    <meeting-list :zoningHeight="zoningHeight" @onRefresh="onRefresh"></meeting-list>
    <!-- <van-overlay :show="upgradeShow">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="title">
            <span>检测到有新版本，是否更新？</span>
          </div>
          <div class="content">
            <p>1.修复xxx</p>
            <p>2.修复xxx</p>
            <p>3.修复xxx</p>
            <p>4.修复xxx</p>
            <p>5.修复xxx</p>
          </div>
          <div class="operation">
            <div class="btns" v-if="!isUpgrade">
              <div class="btn" @click="upgradeShow = false">
                <span>取消</span>
              </div>
              <div class="btn" @click="toDownload">
                <span>{{isError ? "重试" : "更新"}}</span>
              </div>
            </div>
            <van-progress v-else class="progress" :show-pivot="false" :percentage="progressVal" />
          </div>
        </div>
      </div>
    </van-overlay> -->
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import NavBar from '@/components/NavBar/NavBar.vue'
import Zoning from './components/Zoning.vue'
import MeetingList from './components/MeetingList.vue'
import { ifApproval } from '@/api/home/meetingApproval.js'
import { getMessagePageData } from '@/api/message/message.js'
// import useUpgradeApp from "@/hooks/home/useUpgradeApp.js"
import { clearTimer } from "@/utils/util.js"
import { Notify } from 'vant'

export default {
  name: 'Home',
  components: {
    NavBar,
    Zoning,
    MeetingList
  },
  setup() {
    const router = useRouter()
    const store = useStore()

    const userType = computed(() => store.getters.getUserType)
    const userNumber = computed(() => store.getters.getUserNumber)
    
    // 使用更新 app 钩子函数
    // const { upgradeShow, isUpgrade, isError, progressVal, toDownload } = useUpgradeApp()

    /**
     * 根据不同身份调整样式
     */
    let zoningHeight = ref('')
    let zoningItemFlex = ref('')

    if (userType.value === 10) {
      zoningHeight.value = '10rem'
      zoningItemFlex.value = 'row'
    } else {
      zoningHeight.value = '13rem'
      zoningItemFlex.value = 'column'
    }

    let timer = null

    onMounted(() => {
      getMessageList()
      getApprovalMeeting()

      // 定时接收更新消息
      timer = setInterval(() => {
        getMessageList()
        getApprovalMeeting()
      }, 60000)
    })

    // 消息数量
    let messageCount = ref(0)

    // 统计消息数量
    async function getMessageList() {
      const res = await getMessagePageData({
        userNumber: userNumber.value,
      })
      if (res.data.code === 400) {
        Notify({ type: 'warning', duration: 1000, message: res.data.message })
        return
      }

      if (!res.data.data) return

      let data = []
      res.data.data.records.forEach((t) => {
        if (t.isRead === false) {
          data.push(t)
        }
      })
      messageCount.value = data.length
    }

    let isApproval = ref(false)

     // 统计待审批会议数量
    async function getApprovalMeeting() {
      const res = await ifApproval()
      console.log(res) 
      isApproval.value = res.data.data
    }

    // 刷新处理函数
    function onRefresh() {
      getMessageList()
      getApprovalMeeting()
    }

    // 跳转我的主页处理函数
    function toMy() {
      router.push('/my')
    }

    // 跳转消息页面处理函数
    function toMessage() {
      router.push('/message')
    }

    let touchPosition = ref(0)

    // 手指放上屏幕
    function handleTouchstart(e) {
      // console.log(e)
      touchPosition.value = e.changedTouches[0].clientX
    }

    // 手指离开屏幕
    function handleTouchend(e) {
      const leavePosition = e.changedTouches[0].clientX

      if ((leavePosition - touchPosition.value) >= 60) {
        router.push("/my")
      } else if ((leavePosition - touchPosition.value) <= -60) {
        return
      }
    }

    onBeforeUnmount(() => {
      clearTimer(timer)
    })
    
    return {
      zoningHeight,
      zoningItemFlex,
      messageCount,
      isApproval,
      // upgradeShow,
      // isUpgrade,
      // isError,
      // progressVal,
      toMy,
      toMessage,
      onRefresh,
      // toDownload,
      clearTimer,
      handleTouchstart,
      handleTouchend
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--background_color);

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 30rem;
    min-height: 20rem;
    max-height: 28rem;
    border-radius: 0.8rem;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.5rem;
      border-bottom:0.1rem solid #eee;
      padding-bottom: 1rem;
    }

    .content {
      width: 100%;
      flex: 1;
      overflow: auto;
      border-bottom: 0.1rem solid #eee;

      p {
        font-size: 1.4rem;
        margin-bottom: 1rem;
        &:nth-child(1) {
          margin-top: 1rem;
        }
      }
    }
    .operation {
      width: 100%;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 1rem;
    
      .progress {
        width: 100%;
        height: 0.6rem;
      } 
      .btns {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .btn {
          width: 8rem;
          height: 3rem;
          border-radius: 0.8rem;
          text-align: center;
          line-height: 3rem;

          &:nth-child(1) {
            background-color: var(--refused-btn-bg);
            color: var(--refused-btn-color);
          }
          &:nth-child(2) {
            background-color: var(--success-btn-bg);
            color: var(--success-btn-color);
          }
        }
      }
    }
  }
}
@media screen and (min-width: 700px) {
  .home {
    overflow: auto;
  }
}
</style>